<!DOCTYPE html>
<html lang="zh_cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阅读诗歌</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }

        #fileInput {
            margin-bottom: 20px;
position: fixed;
    top: 0;
    left: 0;
        }

        #jsonOutput {
            width: 100%;
            max-height: 100%;
            overflow: auto;
margin-bottom: 20px;
            background-color: #fff;
            border: 1px solid #ddd;
            padding: 10px;
            font-family: 'Courier New', Courier, monospace;
            font-size: 12px;
	text-align:center;
        }
    </style>
</head>
<body>
    <input type="file" id="fileInput" accept=".json">
    <div id="jsonOutput"></div>

    <script>
        document.getElementById('fileInput').addEventListener('change', function(event) {
			// 获取父级元素
			const parentElement = document.getElementById('jsonOutput');
			// 清空所有子元素
			parentElement.innerHTML = '';
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    try {
                        // 尝试解析JSON
                        const json = JSON.parse(e.target.result);
                        // 格式化JSON字符串以便美化显示
                        const formattedJson = JSON.stringify(json, null, 4);
                        // 显示美化后的JSON
                       // document.getElementById('jsonOutput').textContent = formattedJson;
						console.log(json);
						for (const key in json) {
							if (json.hasOwnProperty(key)) { // 检查属性是否为对象自身的属性，而不是继承自原型链
								console.log(key, json[key]);
								// 创建一个新的h1元素
								const newDiv = document.createElement('div');
								// 设置新元素的内容
								let title = ""
								try {
								  // 尝试访问 json[key]['author']
								  if (json[key] && json[key]['title'] !== undefined) {
									console.log(json[key]['title']);
									title = json[key]['title'];
								  } else {
									console.log('json[key]["title"] is not defined');
									try {
									  // 尝试访问 json[key]['author']
									  if (json[key] && json[key]['rhythmic'] !== undefined) {
										console.log(json[key]['rhythmic']);
										title = json[key]['rhythmic'];
									  } else {
										console.log('json[key]["rhythmic"] is not defined');
										title = json[key]['chapter'];
									  }
									}catch (error) {
								  console.log('Error accessing json[key]["author"]', error);
								  title = ""
									}
								  }
								} catch (error) {
								  console.log('Error accessing json[key]["author"]', error);
								}
								let author = ""
								try {
								  // 尝试访问 json[key]['author']
								  if (json[key] && json[key]['author'] !== undefined) {
									console.log(json[key]['author']);
									author = json[key]['author'];
								  } else {
									console.log('json[key]["author"] is not defined');
									author = ""
								  }
								} catch (error) {
								  console.log('Error accessing json[key]["author"]', error);
								}
								newDiv.innerHTML = '<h1 style="font-family:\'黑体\';">'+title+'</h1>'+'<h3>'+author+'</h3>';
								obj1= json[key]['paragraphs'];
								for (const key1 in obj1) {
									if (obj1.hasOwnProperty(key1)) {
										console.log(key1, obj1[key1]);
										newDiv.innerHTML =newDiv.innerHTML +'<p style="font-size:2em;font-family: \'楷体\';">'+obj1[key1]+'</p>';
									}
								}
								obj2= json[key]['notes'];
								try {
								  // 尝试访问 json[key]['author']
								  if(obj2.length>0){
								  newDiv.innerHTML =newDiv.innerHTML + "<p style='font-size:1.1em;text-align:left;'>注释：</p>";}
									for (const key2 in obj2) {
										if (obj2.hasOwnProperty(key2)) {
											console.log(key2, obj1[key2]);
											newDiv.innerHTML =newDiv.innerHTML +'<p style="font-size:1.1em;text-align:left;font-family: \'宋体\';">'+obj2[key2]+'</p>';
										}
									}
								} catch (error) {
								  console.log('Error', error);
								}
								// 获取父元素
								const parentElement = document.getElementById('jsonOutput');
								// 追加新元素到父元素
								parentElement.appendChild(newDiv);
							}
						}
                    } catch (error) {
                        console.error('Error parsing JSON:', error);
                        alert('Invalid JSON file.');
                    }
                };
                reader.readAsText(file);
            }
        });
    </script>
</body>
</html>